<template>
  <div id="reply">
    <!-- <van-nav-bar class="header"
                 @click-left="goback"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">回复</div>
    </van-nav-bar> -->
    <div class="header">
      <div class="left"
           @click="goback"><img src="@/assets/img/public/leftarrow.png"
             alt=""></div>
      <div class="title">申诉</div>
      <!-- <div class="right"
           @click="confirmEdit">完成</div> -->
    </div>
    <div class="main">
      <div class="card bgwrite">
        <div class="title wordsGray">
          <div class="left">内容</div>
          <div class="right">{{txtnum}}/200</div>
        </div>
        <textarea rows="6"
                  @click="inputfocus"
                  ref="cinput"
                  v-model="content"
                  placeholder="详细内容..."
                  class="content fz4"></textarea>
      </div>
      <div class="btn bgprimary wordsWrite fz5"
           @click="assessReply">提交</div>
    </div>
  </div>
</template>
<script>
import { getuserUid } from "@/utils/auth";
export default {
  data() {
    return {
      txtnum: 0,
      content: ""
    };
  },
  watch: {
    content() {
      (this.content.length <= 200 && (this.txtnum = this.content.length)) ||
        ((this.txtnum = 200), (this.content = this.content.slice(0, 200)));
    }
  },
  methods: {
    inputfocus() {
      this.$refs.cinput.focus();
    },
    goback() {
      // this.$router.push({
      //   name: "performance-assessDetail",
      //   params: { uid: this.orderUid }
      // });
      this.$router.go(-1);
    },
    //评价回复
    async assessReply() {
      if (this.content.length > 0) {
        let orderUid = this.$route.params.orderUid;
        const e = await HTTP("assessReply", {
          orderUid,
          content: this.content,
          updateBy: getuserUid()
        });
        if (e.code == 200) {
          this.$toast("回复成功!");
          setTimeout(() => {
            this.$router.push("/performance/orderCenter");
          }, 1000);
        } else {
          this.$toast(e.msg || "服务器异常");
        }
      } else {
        this.$toast("请输入回复评价内容!");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#reply {
  overflow: hidden;
  .header {
    z-index: 200;
    background: #5e8efe;
    color: #ffffff;
    height: 0.92rem;
    line-height: 0.92rem;
    box-sizing: border-box;
    padding: 0 3%;
    display: flex;
    div {
      display: inline-block;
      vertical-align: top;
    }
    .left {
      width: auto;
      margin-top: 0.15rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .title {
      color: #ffffff;
      font-size: 0.35rem;
      text-align: center;
      flex: 1;
    }
    .right {
      font-size: 0.32rem;
      height: 0.92rem;
      line-height: 0.92rem;
      width: auto;
    }
  }
  .main {
    height: calc(100vh - 0.92rem);
    overflow-y: scroll;
    // margin-top: 0.92rem;
    padding: 0.2rem 0.24rem 0 0.24rem;
    .card {
      border-radius: 10px;
      margin-bottom: 0.24rem;
      .title {
        height: 0.64rem;
        line-height: 0.64rem;
        padding-left: 0.24rem;
        border-bottom: 1px solid #e5e5e5;
        position: relative;
        .right {
          position: absolute;
          right: 0.24rem;
          top: 0.05rem;
        }
      }
      .content {
        width: calc(100% - 0.48rem);
        padding: 0.24rem;
        border: none;
      }
    }
    .btn {
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 10px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 0.4rem;
    }
  }
}
</style>
